<template>
  <div>
    <div>
      <el-carousel :interval="2500" type="card" height="200px">
        <el-carousel-item v-for="item in 6" :key="item">
          <div class="notice-wrapper">
            <el-row class="notice-row" :gutter="20">
              <el-col v-for="notice in notices" :key="notice.id" :span="8">
                <el-card class="notice-card" style="width: 85%;height: 100%;">
                  <div class="notice-title">{{ notice.title }}</div>
                  <div class="notice-content">{{ notice.content }}</div>
                  <div class="notice-footer">
                    <div class="time-content">{{ notice.updateDate }}</div>
                  </div>
                </el-card>
              </el-col>
            </el-row>
          </div>
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="center-text"><i>我的上传/My upload</i></div>
    <div class="notice-wrapper">
      <el-row class="notice-row" :gutter="20">
        <el-col v-for="project in projects" :key="project.id" :span="8">
          <el-card class="notice-card" style="width: 90%;height: 200px;margin-top: 20px">
            <div class="notice-title">课题:{{ project.title }}</div>
            <div class="notice-content">
              <a :href="project.address" style="color: coral">链接 :{{ project.address }}</a>
            </div>
            <div class="notice-footer">
              <div class="time-content">{{ project.updateDate }}</div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <div class="center-text"><i>我的保存/My save</i></div>
    <div class="notice-wrapper">
      <el-row class="notice-row" :gutter="20">
        <el-col v-for="project in projects2" :key="project.id" :span="8">
          <el-card class="notice-card" style="width: 90%;height: 200px;margin-top: 20px">
            <div class="notice-title">编号: {{ project.projectId }}</div>
            <div class="notice-content">
              <div class="notice-title">标题: {{ project.title }}</div>

              <el-button type="primary" size="mini" @click="goToProjectManager(project.id)">查看详细</el-button>
            </div>
            <div>
              <el-button type="danger" size="mini" @click="handleDel(project.projectId)">删除</el-button>
            </div>
            <div class="notice-footer">
              <div class="time-content">{{ project.updateDate }}</div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

  </div>
</template>


<script>
import axios from "axios";

export default {
  data() {
    return {
      notices: [], // 通知公告数据
      projects: [],
      swiperOption: {},
      projects2:[]
    };
  },
  methods: {
    goToProjectManager(id) {
      this.$router.push('/projectForm?id=' + id);
    },
    handleDel(index, row) {
      this.$confirm('此操作将删除账户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        axios.post('http://localhost:8082/projects/deleteByProjecteId/' + row.projectId).then(response => {
          this.loadData(); // 重新加载数据
          if (response.data.code === 200) {
            this.$message({
              type: 'success',
              message: "删除成功",
            });
          }

        }).catch(error => {
          this.$message({
            type: 'error',
            message: '删除失败',
          });
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除',
        });
      });
    },
  }
  , created() {
    let _this = this;
    axios.get("http://localhost:8082/notices/showNotices").then(resp => {
      if (resp.data.code === 200) {
        _this.notices = resp.data.data;
      }
    })
    let admin = JSON.parse(localStorage.getItem('access-admin'));
    let userId = admin.id;
    console.log(userId)
    if (userId === null) {
      return
    }
    axios.get("http://localhost:8082/onselfproject/list/" + userId).then(resp => {
      if (resp.data.code === 200) {
        _this.projects = resp.data.data;
      }
    })
    axios.get("http://localhost:8082/projects/listByuser/" + userId).then(resp => {
      if (resp.data.code === 200) {
        _this.projects2 = resp.data.data;
      }
    })
  },
};
</script>
<style>
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}

.notice-row {
  overflow: hidden;
}

.notice-swiper {
  height: 250px;
  overflow: hidden;
}
.center-text {
  text-align: center;
  font-size: 1.5em; /* 1.5倍的默认字体大小，可以根据需要调整 */
}

.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}

.notice-wrapper {
  padding: 20px;
}

.notice-row {
  margin-bottom: 20px;
}

.notice-card {
  background-color: #f5f7fa;
  border-radius: 4px;
  padding: 20px;
  position: relative; /* 添加相对定位 */
}

.notice-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
}

.notice-content {
  font-size: 14px;
  line-height: 1.5;
}

.notice-footer {
  position: absolute;
  bottom: 0;
  right: 0;
  background-color: #f5f7fa; /* 使用与卡片相同的背景色 */
}

.time-content {
  color: gray;
  font-size: 12px;
  padding: 4px;
}
</style>